<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<template id="addNumTem">
			<div>
				<h1>定义主键</h1>
				<h1>数值:{{num}}</h1>
				<button   @click="addNum">自增</button>
		    </div>
		</template>
		
		<hr />
		
		<template id="addNumTem2">
			<div>
				<h1>定义主键</h1>
				<h1>数值:{{num}}</h1>
				<button   @click="addNum">自增</button>
		    </div>
		</template>
		
		
		<div id="app">
			 <add-num-com></add-num-com>
		</div>
		
	
		
		<!-- 引入vue的js包 -->
		<script src="../js/vue.js"></script>
		
		<script>
		    //2.1创建一个组建
			Vue.component("addNumCom",{
				//定义组件内部结构
				data(){
					return  {
						num: 0
					}
				},
				//定义组件的标签体 方式1:字符串拼接   
				//template: "<div> <button  @click='addNum'></button></div>";
				//方式二:文本域的方式
				// template: `
				//        <table  border="1">
				// 	        <tr>
				// 			   <td>第一列</td>
				// 			   <td>第二列</td>
				// 			   <td>第三列</td>
				// 			</tr>
				// 	   </table>
			 //    `
			    //模版语法
				template: "#addNumTem",
				methods: {
					addNum(){
						this.num++;
					}
				}
			})
			
			//定义vue对象
			const  app=new  Vue({
				   el: "#app"
				
			})
			
			
		</script>
		
		
		
		
	</body>
</html>
